<template>
    <div class="chartLayoutCon">
      <div v-if="showTitle" class="titleLine" v-bind:style="{marginLeft: changeLeft ? '20px':'40px'}">
        <div class="leftBlock">
          <i></i> 
          <slot name="title"></slot>
          <slot name="askIco"></slot>
        </div>
        <div class="rightBlock">
          <slot name="subText"></slot>
        </div>
      </div>
      <slot name="identi"></slot>
      <slot name="main"></slot>
      <div v-if="showLine" class="chartLine"></div>
    </div>
</template>
<script>
export default {
  props: {
    changeLeft: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    showLine: {
      // 是否显示 图表后面的线
      type: Boolean,
      default: () => {
        return true;
      }
    },
    showTitle: {
      // 是否显示 图表标题
      type: Boolean,
      default: () => {
        return true;
      }
    }
  }
};
</script>

<style scoped>
.chartLayoutCon {
  position: relative;
  margin: 0 32px 36px 0;
}
.titleLine {
  display: flex;
  align-items: center;
  margin: 46px 0 0 40px;
  justify-content: space-between;
}
.titleLine .leftBlock {
  display: flex;
  align-items: center;
}
.titleLine .leftBlock i {
  width: 3px;
  height: 15px;
  margin-right: 10px;
  background-color: #2ff0d2;
}
.titleLine .leftBlock {
  font-size: 20px;
  color: #2ff0d2;
}
.titleLine .rightBlock {
  font-size: 20px;
}
.chartLine {
  position: absolute;
  top: 32px;
  right: calc(100% / 50 - 30px);
  width: 1px;
  height: calc(100% - 36px);
  background: rgba(49, 206, 230, 0.2);
}
</style>